﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
    <title>Flat List</title>
    <g:javascript library="prototype/prototype"/>

    <g:javascript library="yahoo/yahoo-min"/>
    <g:javascript library="yahoo/calendar-min"/>
    <g:javascript library="yahoo/yahoo-dom-event"/>

    <link rel="stylesheet" href="${createLinkTo(dir:'js/yahoo/assets',file:'calendar.css')}"></link>

</head>
<body>
<div class="nav">
    <span class="menuButton"><g:link controller="realty" action="houseList">Houses</g:link></span>
    <span class="menuButton"><g:link controller="chart" action="offersNumPerDate"  params='["realtyType":"flat"]'>Offers Num Statistic</g:link></span>
    <span class="menuButton"><g:link controller="chart" action="priceByRoomsByDate"  params='["realtyType":"flat"]'>Price by date</g:link></span>
    <span class="menuButton"><g:link controller="chart" action="priceDynamicByRoomsByDate"  params='["realtyType":"flat"]'>Price dynamic by date</g:link></span>
</div>

<div class="body">
    <h1>Flat List. Now active ${offersNum} items.</h1>
    <g:if test="${flash.message}">
        <div class="message">
            ${flash.message}
        </div>
    </g:if>

        <g:form controller="realty" action="filter" method="get">
        <table>
            <tr>
                <td style="width:450px;">
                    <table style="width:410px;">
                        <tr align="center">
                            <td align="center">
                                <div id="cal1Container" align="center" style="width:200px;"></div>
                            </td>
                            <td align="center">
                                <div id="cal2Container" align="center" style="width:200px;"></div>
                            </td>
                        </tr>
                        <tr>
                            <td width="200" align="center">
                                <input type="text" id="dateInterval1" name="dateInterval1" value="${params['dateInterval1']}"/>
                            </td>
                            <td width="200" align="center">
                                <input type="text" id="dateInterval2" name="dateInterval2" value="${params['dateInterval2']}"/>
                            </td>
                        </tr>
                    </table>
                </td>
                <td align="left" valign="top">
                    <table align="left" style="width:100%;height:100%; text-align:left;">
                        <tr align="left">
                            <td style="text-align:left;">
                                <input id="currentActive" type="radio" name="filter" value="currentActive" checked="true"/>Active offers
                            </td>
                        </tr>
                        <tr align="left">
                            <td style="text-align:left;">
                                <input id="lastChanges" type="radio" name="filter" value="lastChanges"/>
                                        Get last added/removed offers
                            </td>
                        </tr>
                        <tr align="left">
                            <td style="text-align:left;">
                                <input id="filterByDate" type="radio" name="filter" value="filterByDate" />Get latest in date interval
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;">
                                <input type="radio" name="filter" onclick="switchElement('plt')" value="priceLessThan"/>
                                Price less than:
                                <input id="plt" type="text" name="filterValue" value="" style="display:none;"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;">
                                <input type="radio" name="filter" onclick="switchElement('sdiff')"
                                       value="compareStates"/>
                                Show differs:
                                <input id="sdiff" type="text" name="filterValue" value=""
                                       style="display:none;"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;">
                                <input type="submit" value="submit"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
            <script type="text/javascript">
                 $('${params["filter"] != null && params["filter"] != "" ? params["filter"] : "currentActive"}').setAttribute("checked", true);
            </script>
            <input type="hidden" id="realtyType" name="realtyType" value="flat"/>
    </g:form>
    
    <span class="actionButton"><g:link action="grab" params='["realtyType":"flat"]'>Grab</g:link></span>
    <span class="actionButton"><g:link action="grabArchive" params='["realtyType":"flat"]'>GrabArchive</g:link></span>
    <table>
        <thead>
            <tr>
                <g:sortableColumn property="id" title="Id" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="externalId" title="externalId" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="level" title="Level" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="rooms" title="Rooms" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="price" title="Price" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="address" title="Address" params='["stateId":params["stateId"]]'/>

                <g:sortableColumn property="telNumbers" title="Tel" params='["stateId":params["stateId"]]'/>

                <th></th>
            </tr>
        </thead>
        <tbody>
            <g:each in="${realtyList}">
                <tr style="${it.state == -1 ? 'color:red;' : it.state == 1 ? 'color:green;' : ''}">

                    <td>${it.id?.encodeAsHTML()}</td>

                    <td><a href="javascript://nop" onclick="showPriceStatistics(this)">${it['externalId']?.encodeAsHTML()}</a>
                    </td>
                    
                    <td>${it.maxLevel?.encodeAsHTML()}/${it.level?.encodeAsHTML()}</td>

                    <td>${it.rooms?.encodeAsHTML()}</td>

                    <td>${it.priceValue?.encodeAsHTML()}
                        <g:if test="${it.dynamic == -1}">
                            <img src="/grabber/images/arrow-gdown.gif" alt="${it.dynamic}"/>
                        </g:if>
                        <g:elseif test="${it.dynamic == 1}">
                            <img src="/grabber/images/arrow-rup.gif" alt="${it.dynamic}"/>
                        </g:elseif>
                    </td>
                    <td><g:decodeString value="${it.address}"/></td>

                    <td>${it.telNumbers?.encodeAsHTML()}</td>

                    <td class="actionButtons">
                        <span class="actionButton"><g:link action="details" id="${it.id}">Details</g:link></span>
                    </td>
                </tr>
            </g:each>
        </tbody>
    </table>
    <!--<div class="paginateButtons">-->
        <!--<g:paginate total="${RealtyObject.count()}"/>-->
    <!--</div>-->
</div>
<script type="text/javascript">
    function showPriceStatistics(el) {
        var externalId = el.innerHTML;
        $("statisticImage").src = '/grabber/chart/getOfferStatistic?externalId=' + externalId
        $(statisticImageContainer).style.display = '';
        $(statisticImageContainer).style.top = getElementY(el) + 25;
        $(statisticImageContainer).style.left = getElementX(el) + 50;
    }
    function getElementY(element) {
        var targetTop = 0;
        if (element.offsetParent) {
            while (element.offsetParent) {
                targetTop += element.offsetTop;
                element = element.offsetParent;
            }
        } else if (element.y) {
            targetTop += element.y;
        }
        return targetTop;
    }

    function getElementX(element) {
        var targetLeft = 0;
        if (element.offsetParent) {
            while (element.offsetParent) {
                targetLeft += element.offsetLeft;
                element = element.offsetParent;
            }
        } else if (element.x) {
            targetLeft += element.yx;
        }
        return targetLeft;
    }
</script>

<div id="statisticImageContainer" style="display:none; position:absolute;">
    <img id="statisticImage" src="" alt="statistic"/>
</div>


<script type="text/javascript">
    //var calendar1, calendar2;
      var dateInterval = '${params["dateInterval1"]}';
      var dateInterva2 = '${params["dateInterval2"]}';
      var splitedDateInterval1 = dateInterval.split('-');
      var splitedDateInterval2 = dateInterva2.split('-');
    calendar1 = new YAHOO.widget.Calendar("calendar1", "cal1Container");
    calendar2 = new YAHOO.widget.Calendar("calendar2", "cal2Container");
    if(dateInterval.length > 5){
        calendar1.cfg.setProperty("pagedate",""+splitedDateInterval1[1]+"/"+splitedDateInterval1[0],false);
        calendar1.cfg.setProperty("selected",""+splitedDateInterval1[1]+"/"+splitedDateInterval1[2]+"/"+splitedDateInterval1[0],false);
    }
    if(dateInterval.length > 5){
        calendar2.cfg.setProperty("pagedate",""+splitedDateInterval2[1]+"/"+splitedDateInterval2[0],false);
        calendar2.cfg.setProperty("selected",""+splitedDateInterval2[1]+"/"+splitedDateInterval2[2]+"/"+splitedDateInterval2[0],false);
    }

    calendar1.render();
    calendar2.render();

    calendar1.selectEvent.subscribe(handleSelect1, calendar1, true);
    calendar2.selectEvent.subscribe(handleSelect2, calendar2, true);

    function handleSelect1(type, args, obj) {
        var dates = args[0];
        var date = dates[0];
        var year = date[0], month = date[1], day = date[2];

        var txtDate1 = document.getElementById("dateInterval1");
        txtDate1.value = year + "-" + month + "-" + day;
    }
    function handleSelect2(type, args, obj) {
        var dates = args[0];
        var date = dates[0];
        var year = date[0], month = date[1], day = date[2];

        var txtDate1 = document.getElementById("dateInterval2");
        txtDate1.value = year + "-" + month + "-" + day;
    }
    function switchElement(elemId) {
        var inputs = $A(document.getElementsByName('filterValue'));
        inputs.map(Element.extend).invoke('hide');
        inputs.each( function (el){
            el.disabled = true;
        })
        $(elemId).value = '';
        $(elemId).disabled = false;
        $(elemId).show();
    }
    function selectValue(selValue) {
        var inputs = $A(document.getElementsByName('filterValue'));
        inputs.each(function (item) {
            if (item.style.display == '') {
                if (item.value == ''){
                    item.value = selValue + ":";
                    changeColor(selValue, 'lightgreen');
                    return;
                } else {
                    if (item.value.indexOf(':') == item.value.length - 1){
                        item.value = item.value + selValue;
                        changeColor(selValue, 'lightyellow');
                        return;
                    }
                }
                var values = $A(item.value.split(':'));
                item.value = '';
                values.each(function(val) {
                    if (val != selValue && val != '') {
                        if (item.value == ''){
                            item.value = val + ":";
                            changeColor(val, 'lightgreen');
                        }else{
                            item.value = item.value + val;
                            changeColor(val, 'lightyellow');
                        }
                    }else{
                        changeColor(selValue, '#F0F0F0');
                    }
                })
            }
        })
    }
    function changeColor(value, color){
        var tds = $$('td[title="idCol"]');
        tds.each(function (el){
            if(el.style.backgroundColor == color){
                el.style.backgroundColor = '#F0F0F0';
            }
            if(el.innerHTML == value)
                el.style.backgroundColor = color;
        })
    }
</script>

</body>
</html>
